<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>liuz2&#39;s Blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.63.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.9576afd3b3c158d98f48ec5df01fec6a.css" rel="stylesheet">
    

    

    
      

    

    
    
      <link href="/posts/index.xml" rel="alternate" type="application/rss+xml" title="liuz2&#39;s Blog" />
      <link href="/posts/index.xml" rel="feed" type="application/rss+xml" title="liuz2&#39;s Blog" />
      
    

    <meta property="og:title" content="Posts" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://liuz2.gitee.io/posts/" />
<meta property="og:updated_time" content="2022-02-08T14:22:10+08:00" />
<meta itemprop="name" content="Posts">
<meta itemprop="description" content=""><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Posts"/>
<meta name="twitter:description" content=""/>

	
  </head>

  <body class="ma0 avenir bg-white">

    

  
  
  <header class="cover bg-top" style="background-image: url('https://liuz2.gitee.io/images/earth.jpg');">
    <div class="bg-black-60">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        liuz2&#39;s Blog
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/links/" title="Links page">
              Links
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/timeline/" title="Timeline page">
              Timeline
            </a>
          </li>
          
        </ul>
      
      















    </div>
  </div>
</nav>

      <div class="tc-l pv4 pv6-l ph3 ph4-ns">
        <h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">
          Posts
        </h1>
        
      </div>
    </div>
  </header>


    <main class="pb7" role="main">
      
  <article class="pa3 pa4-ns nested-copy-line-height nested-img">
    <section class="cf ph3 ph5-l pv3 pv4-l f4 tc-l center measure-wide lh-copy mid-gray"></section>
    <section class="flex-ns flex-wrap justify-around mt5">
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/react-quick-start/" class="link black dim">
        2022 React 快速入门
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      本文介绍 React 的基本概念，以 Hooks 写法为主。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/source-node-only/" class="link black dim">
        源码阅读：node-only
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      阅读 node-only 的源码
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/task-and-microtask/" class="link black dim">
        宏任务和微任务
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      简单认识宏任务和微任务，了解事件循环的基本流程
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/map-and-set/" class="link black dim">
        Set 和 Map 的用法
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      Map 和 Set 是 ES6 新增的类型。本文介绍它俩的基础用法。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/javascript-variables/" class="link black dim">
        Javascript 的变量、作用域和内存
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      深入了解 JavaScript 中变量的类型、作用域和内存的使用注意事项
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/node-intro/" class="link black dim">
        Node.js 入门
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      Node.js 零基础入门
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/string-replace-explained/" class="link black dim">
        string.replace() 详解
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      由浅入深的介绍 string.replace 函数
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/local-https-certificates/" class="link black dim">
        设置本地 nginx 的 HTTPS
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      生成自签名的证书，添加信任，配置 nginx
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/rollup-intro/" class="link black dim">
        Rollup 入门
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      Rollup 是一款轻快的模块打包器。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/alipay-mini-richtext/" class="link black dim">
        支付宝小程序如何显示富文本？
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      使用 rich-text 组件和 mini-html-parser 在支付宝小程序中渲染富文本。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/debug-nodejs/" class="link black dim">
        调试 Node.js
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      如何启动 Node.js 检查器？如何连接 Node.js 进程？常用的调试器客户端有哪些？
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/change-event-of-input/" class="link black dim">
        关于文本输入框 change 事件触发时机
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      对于文本输入框，change 事件仅在其内容有变化，且失去焦点时触发
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/css-variable/" class="link black dim">
        CSS 变量教程
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      CSS 变量是什么？有什么好处？和预处理器变量有什么不同？怎么用？
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/alipay-mp-usage/" class="link black dim">
        支付宝小程序使用指南
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      涵盖支付宝小程序最常用的使用场景，包括获取用户授权，支付，全局配置参数等。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/asciinema-usage/" class="link black dim">
        如何使用 asciinema ？
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      asciinema 是一款终端操作录屏小工具。
    </div>
  </div>
</div>
</div>
      
        <div class="relative w-100 w-30-l mb4 bg-white"><div class="relative w-100 mb4 bg-white nested-copy-line-height">
  <div class="bg-white mb3 pa4 gray overflow-hidden">
    <span class="f6 db">Posts</span>
    <h1 class="f3 near-black">
      <a href="https://liuz2.gitee.io/posts/hugo-usage/" class="link black dim">
        如何使用 Hugo 创建博客
      </a>
    </h1>
    <div class="nested-links f5 lh-copy nested-copy-line-height">
      The world&rsquo;s fastest framework for building websites
    </div>
  </div>
</div>
</div>
      
    </section>

</article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://liuz2.gitee.io/" >
    &copy;  liuz2's Blog 2022 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
